import React from 'react';
import clsx from 'clsx';
import SettingsMenu from './settingsMenu/SettingsMenu';
import ProfileCard from './profile/ProfileCard';
import styles from './SettingsPage.module.scss';
import SecurityCard from './security/SecurityCard';
import SessionsCard from './session/SessionCard';

/**
 * @function SettingsPage - Отрисовывает компонент страницы настроек.
 * @param { boolean } isOpenMenu - Показывает открыто или закрыто боковое меню.
 * @return {React.JSX.Element} - Компонент страницы настроек.
 */
const SettingsPage: React.FC<{ isOpenMenu?: boolean }> = ({ isOpenMenu }): React.JSX.Element => (

    <div className={clsx(styles.settingsPage, isOpenMenu && styles.toggleWidth)} >
            <SettingsMenu />
            <div className={styles.content}>
                <ProfileCard />
                <SecurityCard />
                <SessionsCard />
            </div>
        </div>
);

SettingsPage.defaultProps = {
    isOpenMenu: false
}

export default SettingsPage;